<template>
  <view>
    <view class="search-content">
      <view class="search-content-con">
        <u-search
          inputAlign="left"
          placeholder="请输入关键字进行搜索"
          v-model="searchKeyword"
          :height="72"
          @search="searchInputHandle"
          @custom="searchInputHandle"
          :action-style="searchActionStyle"
        ></u-search>
      </view>
    </view>
    <view class="fund-wrap">
      <view class="fund-title">业务流水</view>
      <view
        class="fund-day-section"
        v-for="item in dataList"
        :key="item.my_self_key"
      >
        <view class="record-content">
          <view
            class="record-list am-flex-row-center"
            v-for="(list, ind) in item.my_self_children"
            :key="ind"
            @click="recordHandle(list.businessType, list.orderId)"
          >
            <view class="record-list-order-info">
              <view class="record-list__order-no am-flex-row-center">
                <text style="white-space: nowrap"
                  >{{ formatLabelName(list.businessType) }}:</text
                >
                <text class="am-text-eill">{{ list.orderNo }}</text>
              </view>
              <view class="record-list__supplier-wrap" v-if="list.supplierName">
                <text
                  class="am-text-eill record-list__supplier-name am-block"
                  >{{ list.supplierName }}</text
                >
              </view>
            </view>
            <view class="record-list-amount">
              <text
                class="am-text-eill record-list-amount-num"
                :style="{ color: list.type === 2 ? '#F65301' : null }"
              >
                {{ list.type === 1 ? '-' : '+' }}￥{{ list.transactionAmount }}
              </text>
            </view>
          </view>
          <view class="am-flex-rc-between"
            ><view class="fund-day-title">{{ list.typeName }}</view
            ><view class="fund-day-title">{{
              list.paymentTypeName
            }}</view></view
          >

          <view class="fund-day-title am-flex-row-center">{{
            item.my_self_create_time
          }}</view>
        </view>
      </view>
    </view>
    <co-load-more :type="loadingType"
      ><co-empty slot="empty" model="data" paddingTop="80rpx"></co-empty
    ></co-load-more>
  </view>
</template>

<script>
import { apiCapitalList } from '@/api/capital'
// 不允许请求的type
const noRequestType = [1, 2, 3]

const cacheTime = 5 * 60 * 1000 // 缓存数据的时间，单位ms; 5分钟。
export default {
  data() {
    return {
      searchKeyword: '',
      dataList: [],
      pageNum: 1,
      loadingType: 999,
      dayCache: [],
      searchActionStyle: {
        color: '#fff',
        fontSize: '28rpx',
        background:
          'linear-gradient( 323deg, #FF4564 8%, #F14141 30%, #FC843B 100%)',
        borderRadius: '200rpx 200rpx 200rpx 200rpx',
        width: '112rpx',
        height: '56rpx',
        lineHeight: '56rpx'
      }
    }
  },
  components: {},
  onLoad() {
    this.getInit()
  },
  onReachBottom() {
    this.getOrderList()
  },
  onPullDownRefresh() {
    this.getInit()
  },
  methods: {
    searchInputHandle(e) {
      this.getInit()
    },
    getInit() {
      this.pageNum = 1
      this.loadingType = 999
      this.dataList = []
      this.dayCache = []
      this.getOrderList()
    },
    formatLabelName(type) {
      let orderType = [2, 3]
      return orderType.includes(type) ? '订单号' : '流水号'
    },
    getOrderList() {
      if (noRequestType.includes(this.loadingType)) {
        return
      }
      this.loadingType = 2
      console.log('调用获取数据')
      apiCapitalList({
        pageNum: this.pageNum,
        pageSize: 10,
        keyword: this.searchKeyword
      })
        .then(({ data }) => {
          if (data.state === 'OK') {
            let timestampToTime = this.$timestampToTime
            let curData = data.data.list
            let dataList = [...this.dataList]
            let dayCache = [...this.dayCache]
            curData.forEach((p1, p2) => {
              let timeYMD = timestampToTime(p1.opTime, 'YYYY-MM-DD hh:mm:ss')
              let timeIndex = dayCache.indexOf(timeYMD)
              if (timeIndex > -1) {
                dataList[timeIndex].my_self_children.push(p1)
              } else {
                dayCache.push(timeYMD)
                dataList.push({
                  my_self_create_time: timeYMD,
                  my_self_key: p1.opTime,
                  my_self_children: [p1]
                })
              }
            })
            this.dataList = dataList
            this.dayCache = dayCache
            console.log(this.dataList)
            if (this.pageNum === 1 && this.dataList.length === 0) {
              this.loadingType = 1
            } else if (data.data.totalPage === this.pageNum) {
              this.loadingType = 3
            } else {
              this.loadingType = 999
              this.pageNum++
            }
          }
          uni.stopPullDownRefresh()
        })
        .catch((err) => {
          console.log(err)
          this.loadingType = 999
          this.$am_toast.warning('查询失败，请重新尝试！')
          uni.stopPullDownRefresh()
        })
    },

    // 记录点击
    recordHandle(type, id) {
      let orderType = [2, 3]
      if (orderType.includes(type)) {
        this.$u.route({
          url: '/pages/order/order-details',
          params: {
            id: id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$section-plr: 30rpx;
.fund-wrap {
  margin-bottom: 0;
  padding: 32rpx;
  background: #fff;
}
.fund-day-section {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 20rpx;
}
.fund-day-title {
  font-size: 24rpx;
  color: #86909c;
  line-height: 50rpx;
}

.record-list {
  position: relative;
  height: 90rpx;
  // border-top: 1px solid #e8e8e8;
}
.record-list-order-info {
  width: 510rpx;
  flex-shrink: 0;
}
.record-list__order-no {
  font-size: 30rpx;
  color: #1d2129;
  line-height: 42rpx;
}
.record-list__supplier-wrap {
  margin-top: 11rpx;
}
.record-list__supplier-name {
  font-size: 28rpx;
  color: #8b8b8d;
}
.record-list-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  width: 0;
}
.record-list-amount-num {
  font-size: 32rpx;
  color: #f14141;
  line-height: 44rpx;
}
.refund-tag {
  width: 60rpx;
  height: 30rpx;
  font-size: 22rpx;
  color: #ff4d4f;
  background: #fff1f0;
  border-radius: 4rpx;
}
.img {
  width: 58rpx;
  height: 49rpx;
  position: absolute;
  right: 0;
  top: 0;
}
.fund-title {
  margin-bottom: 30rpx;
  font-weight: 600;
  font-size: 30rpx;
  color: #1d2129;
  line-height: 34rpx;
}
.search-content {
  padding: 24rpx;
  display: flex;
  align-items: center;
  padding-left: 16rpx;
  padding-right: 16rpx;
  background: #fff;
}
.search-content-con {
  padding: 0 22rpx;
  flex: 1;
}
</style>
